<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>file_Add1.jsp</title>
	<script type="text/javascript" src="../js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="../js/jquery.livequery.js"></script>
	
	<style type="text/css">
		#pbgDataRoomTitleArea{width:auto; margin-top:10px; margin-left:10px; margin-bottom:10px; }
		#fileTitleArea{width:988px; margin-left: 10px; margin-top:100px; }
		#fileTitleMenu{float:none; margin: 0 auto; width:560px; height:15px; font-size:12px; font-family:"돋움"; }
		#textTitle{width: 100px; padding-left: 5px; padding-top: 5px; }
		#inputTitle{width: 100px;}
		
		#fileContentsArea{width:988px; margin-left: 10px; margin-top:5px;}
		#fileContentsMenu{float:none; margin: 0 auto; width:560px; font-size:12px; font-family:"돋움"; }
		#textContents{width: 100px; padding-left: 5px; padding-top: 5px; }
		#textAreaContents{ }
		
		#fileFormArea{width:988px; margin-left: 10px; margin-top:5px; }
		#fileFormMenu{float:none; margin: 0 auto; width:560px; height:24px; font-size:12px; font-family:"돋움"; }
		#textFileUpload{width: 100px; padding-left: 5px; padding-top: 5px; }
		#fileForm{width:348px;}
		#fileList{width:348px;}
		.contents{clear:left; }
		.contentFileNames{padding-left: 5px; padding-top: 5px; }
		.deleteBtns{font-size:12px; font-family:"돋움";}
		
		#uploadBtnArea{width:988px; margin-left: 10px; margin-top:5px; }
		#uploadBtnMenu{float:none; margin: 0 auto; width:560px; height:15px; font-size:12px; font-family:"돋움"; }
		#uploadBtn{padding-left:393px; }
		#submitBtn{font-size:12px; font-family:"돋움";}
		
	</style>
	
	<script type="text/javascript"> 

	$(document).ready(function() {
		
		var copyInput = "<input type='file' class='uploadFiles' name='uploadFile' size='35'/>";
		
		$(".uploadFiles").livequery("change", function() { // 파일폼에 파일을추가하면
			$(this).hide(); // 업로드 파일이 있으면 해당 파일폼 숨김
			$(".uploadFiles:hidden").each(function() { // 숨겨진 파일폼들 name에 인덱스부여해서 rename
				var index = $(".uploadFiles:hidden").index($(this)); 
				$(this).attr("name", "uploadFile" + index); 
			});
			$("#fileForm").prepend(copyInput); // 이전 파일폼 위치에 새로운 파일폼 추가
			var fileName = $(this).val(); // 파일path
			fileName = fileName.replace(/^.*\\/, ''); // 파일이름
			$("#fileList").prepend("<div class='contents'>" + // 업로드한 파일내역 추가
						               "<div class='contentFileNames'>" + fileName + " </div>" +
				                       "<div><input type='button' class='deleteBtns' value='삭제'/></div>" +
			                       "</div>"); 
			
		});
		
		$(".deleteBtns").livequery("click", function() { // 파일삭제버튼을 클릭하였을때
			var index = $(".deleteBtns").index($(this));
			$(".contents").eq(index).remove(); // 추가한 파일내역 삭제
			$(".uploadFiles:hidden").eq(index).remove(); // 숨긴 업로드 파일폼 삭제
			$(".uploadFiles:hidden").each(function() { // 숨겨진 파일폼들 name에 인덱스부여해서 rename
				var index = $(".uploadFiles:hidden").index($(this)); 
				$(this).attr("name", "uploadFile" + index); 
			});
		});

		
	});
	
	</script>
	
</head>
<body>

  	<form id="uploadForm" action="../fileupload/fileAdd.think" enctype="multipart/form-data" method="post">
  		<div id="pbgDataRoomTitleArea">
			<h1>Insert</h1>
		</div>
  		<div id="fileTitleArea">
  			<div id="fileTitleMenu">
	  			<div id="textTitle">파일 설명</div>
	  			<div id="inputTitle"> 
	  				<input type="text" name="title" size="48" maxlength="25"/>
	  			</div>
  			</div>
  		</div> 
  		<div id="fileContentsArea">
  			<div id="fileContentsMenu">
  				<div id="textContents">파일 내용</div>
  				<div id="textAreaContents">
  					<pre><textarea rows="10" cols="40" ></textarea></pre>
  				</div>
  			</div>
  		</div>
 		<div id="fileFormArea">
 			<div id="fileFormMenu">
 				<div id="textFileUpload">파일업로드</div>
		  		<div id="fileForm">
		  			<input type="file" class="uploadFiles" name="uploadFile" size="35"/>
					<div id="fileList"></div>
		  		</div>
 			</div>
 		</div>
  		<div id="uploadBtnArea">
  			<div id="uploadBtnMenu">
		  		<div id="uploadBtn">
			  		<input type="submit" id="submitBtn" value="upload"/>
		  		</div>
  			</div>
  		</div>
  	</form>

</body>
</html>